<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>




<div id="table_list" style="width: 100%;"></div>

<script>
    $("#table_list").load("https://res.dcdev.net/dcdev/v1.0.6/assets/html/_render_somthing.html",
        "",
        function () {
            data = {
                // 容器div的id
                price: 0,
                id: "table_list",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "y",
                // 多选配置
                check_config: {
                    // 单选 （none/single/multi）,默认none
                    mode: "multi",
                    enable: true,
                    // 选中状态配置
                    on_config: {
                        html: `<a style="color:red;">22</a>`,
                        // 选中回调
                        cb: function (res) {

                        },
                    },
                    // 未选中状态配置
                    off_config: {
                        html: `<a style="color:gray;">11</a>`,
                        // 取消选中回调
                        cb: function (res) {

                        },
                    }
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "text-align: center;clear:both;",
                },
                // 每个li的配置
                li_config: {
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                        */
                        li_class: "",
                        li_style: "display:flex;margin:10px;    border-bottom: solid #dee2e6 1px;padding: 10px;",
                        li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `<tr >
                            <td class="xx_pointer rows_width" > 
                            <div  style="position: relative; width: 100%; margin: 5px;display: flex;flex-direction: row;">
                            <img style="width: 24px;height: 24px;" src="#{img}" />
                            <input   style="display:none;"/>
                            <div style="margin-left: 5px;" >#{title}</div></div></td>
                            <td>
                            <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
                            操作
                            </button>
                            <div class="dropdown-menu">
                            <a   class="dropdown-item" @click="zip(num)">云压缩</a>
                            <a  class="dropdown-item" @click="modify_name('dir',num)">重命名</a>
                            <a   class="dropdown-item" @click="move('dir',num)">移动</a>
                            <a  class="dropdown-item" @click="">复制</button>
                            <a  class="dropdown-item" @click="_delete('dir',num)">删除</a>
                            </div>
                            </div>
                            </td>

                            </tr>`
                        },
                        /*
                            条件渲染--根据条件决定渲染时使用的html
                            field_value 字段与值作为渲染条件
                            field_field 字段与字段作为渲染条件
                            */
                        // condition条件渲染，bool==1时，我的发言，头像在右边
                        // condition: [{
                        //     expression: "^{ROW_INDEX} ==1",
                        //     html: `2`
                        // }, ],
                    }
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {},
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                data_config: {
                    data: [{
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "私人文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "公开文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "我的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "你的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "小姐姐"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "其他"
                    }, ],
                },
            };
            new render_class().render(data, null, null)
        });
</script>